<template>
	<view class="main-cont box box-tb box-pack-start">
		<view class="box box-tb box-align-center box-pack-center user">
			<u-avatar :src="user.icon" mode="circle" size="125"></u-avatar>
			<view class="user-name mt10">
				{{user.name}}
			</view>
		</view>
		<view class="chart">
			<view class="info">
				<view class="box box-pack-between box-align-center title" @click="show = !show">
					<view style="color: #626BF1;font-size: 28rpx;">
						详细数据
					</view>
					<u-icon name="arrow-right" v-if="show == false"></u-icon>
					<u-icon name="arrow-down" v-if="show == true"></u-icon>
				</view>
				<view class="data box box-align-center" v-if="show == true">
					<view class="list box box-tb box-align-center box-pack-center" v-for="(item,index) in infoArr"
						:key="index">
						<view class="value">
							{{item.value}}
						</view>
						<view class="tips">
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="charts-box">
				<qiunDataCharts type="radar" :chartData="chartData" background="#fff" :ontouch="false" />
			</view> -->
			<view class="charts">
				<view class="charts-box">
					<mpvue-echarts id="main" ref="mapChart" @onInit="renderLine" />
				</view>
			</view>
		</view>
		<!-- 		<view class="btn">
			<u-button type="warning">分享</u-button>
		</view> -->
	</view>
</template>

<script>
	import * as echarts from './echart/echarts.min.js'
	import mpvueEcharts from './mpvue-echarts/src/echarts.vue'
	export default {
		components: {
			mpvueEcharts
		},
		data() {
			return {
				user: uni.getStorageSync('user'),
				dclass: uni.getStorageSync('dclass'),
				chartData: {
					categories: [],
					series: [],
				},
				style: {
					height: "0"
				},
				show: false,
				infoArr: [],
				sc:3,
				sjScore:3,
				kcScore:3,
				hyd:3,
				bzs:3	
			}
		},
		onLoad() {
			this.stuXqbg()
		},
		methods: {
			stuXqbg() {
				let opts = {
					url: '/dstudent/stuXqbg',
					method: 'post'
				};
				let params = {
					userid: this.user.id,
					schoolid: this.user.schoolId,
					classid: this.dclass.id
				};
				this.$api.post(opts, params).then(res => {
					//console.log(res);
					if (res.code == 0) {
						this.chartData.categories = ["学习时长", "实践分", "课程分", "活跃度", "被赞数"];
						this.chartData.series.push({
							"name": "学情报告",
							"data": res.data.data
						});
						this.sc = res.data.sc
						this.sjScore = res.data.sjScore
						this.kcScore = res.data.kcScore
						this.hyd = res.data.hyd
						this.bzs = res.data.bzs
						//console.log(this.chartData);
						this.infoArr = [{
								title: "学习时长",
								value: res.data.sc + "分钟"
							},
							{
								title: "实践分数",
								value: res.data.sjScore != null ? res.data.sjScore : 0 + "分"
							},
							{
								title: "课程分数",
								value: res.data.kcScore != null ? res.data.kcScore : 0 + "分"
							},
							{
								title: "活跃度",
								value: res.data.hyd != null ? res.data.hyd : 0
							},
							{
								title: "被赞数",
								value: res.data.bzs != null ? res.data.bzs : 0
							}
						]
					}

				})
			},
			renderLine(e) {
				let {
					canvas,
					width,
					height
				} = e;
				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				var option = {
					"radar": {
						"axisLine": {
							"lineStyle": {
								// "color": "black"
								"width": 1
							}
						},
						"indicator": [{
								"max": 600,
								"name": '学习时长'
							},
							{
								"max": 100,
								"name": '实践分数'
							},
							{
								"max": 100,
								"name": "课程分数"
							},
							{
								"max": 1000,
								"name": '活跃度'
							},
							{
								"max": 100,
								"name": '被赞数'
							}
						],
						//图表文字大小
						"axisName": {
							"color": "#5F6572",
							"fontSize": 12,
							"fontStyle": 'normal',
							"fontFamily": 'PingFang SC',
						},
						//指示器与轴的距离
						"nameGap": 3,
						"splitLine": {
							"lineStyle": {
								"width": 1
							}
						},
						"splitNumber": 5,
					},
					"series": [{
						//给数据设置填充色
						"areaStyle": {
							"color": "#FF5A77",
							"opacity": 0.2,
						},
						//图表数据
						"data": [{
							symbol: "circle",
							symbolSize: 4,
							value: [this.sc, this.sjScore, this.kcScore, this.hyd, this.bzs]
						}],
						//数据的边框色
						"lineStyle": {
							"width": 1,
							'color': '#FF5A77'
						},
						"type": "radar",
						itemStyle: { //折线拐点标志的样式
							borderColor: "#FF5A77", //拐点的边框颜色
							borderWidth: 3.5
						},
					}],
					"xAxis": {
						"show": false
					},
					"yAxis": {
						"show": false
					}
				}
				chart.setOption(option);
			},
			clickHide() {
				this.show = !this.show
			},
			clickShow() {
				this.show = !this.show
			}
		}
	}
</script>

<style scoped lang="scss">
	/* 请根据需求修改图表容器尺寸，如果父容器没有高度图表则会显示异常 */
	.charts-box {
		width: 100%;
		height: 300px;
	}

	.main-cont {
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, #565293, #312F63);
	}

	.chart {
		// position: relative;
		// padding-top: 112rpx;
		margin: 14rpx auto;
		width: 722rpx;
		height: 780rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
	}

	.user {
		height: 243rpx;
	}

	.user-name {
		font-size: 32rpx;
		color: #fff;
	}

	.info {
		position: relative;
		width: 100%;
		z-index: 100000;
		background-color: #fff;
		border-radius: 18rpx;

		.title {
			padding: 0 48rpx;
			width: 100%;
			height: 110rpx;
			font-size: 28rpx;
			color: #626BF1;
			border-bottom: 2rpx solid #F0F1F8;
		}
	}

	.list {
		width: 33.3%;

		.value {
			font-size: 30rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #5F6572;
		}

		&:nth-child(1) {
			.value {
				color: #00CB7B;
			}
		}

		&:nth-child(2) {
			.value {
				color: #7F84E4;
			}
		}

		&:nth-child(3) {
			.value {
				color: #F97762;
			}
		}

		&:nth-child(4) {
			.value {
				color: #FF9B4F;
			}
		}

		&:nth-child(5) {
			.value {
				color: #5893F7;
			}
		}
	}

	.data {
		position: absolute;
		top: 112rpx;
		width: 100%;
		height: 274rpx;
		flex-wrap: wrap;
		background: #FFFFFF;
		box-shadow: 0px 7px 32px 0px rgba(96, 101, 112, 0.08);

	}

	.btn {
		margin: 40rpx auto 0;
		width: 280rpx;
	}
</style>
